<script setup lang="ts">
import Taro from "@tarojs/taro";
import { cva } from "class-variance-authority";

import { ref, watch } from "vue";

withDefaults(
  defineProps<{
    position?: "center" | "bottom";
    clickMaskClose?: boolean;
  }>(),
  {
    position: "center",
  }
);

const vars = cva("absolute duration-200", {
  variants: {
    position: {
      center: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
      bottom: "w-screen wtranslate-y-0 bottom-0 left-0",
    },
  },
});

const visible = defineModel<boolean>();

const showContent = ref(false);
const showWrap = ref(false);

const handleClickMask = () => {
  close();
};

const open = () => {
  showWrap.value = true;
  setTimeout(() => {
    showContent.value = true;
  }, 4);
};

const close = () => {
  showContent.value = false;
  setTimeout(() => {
    showWrap.value = false;
    visible.value = false;
  }, 200);
};

watch(() => visible.value, (flag) => {
  console.log("falg");

  // @ts-expect-error
  Taro.setPageStyle({
    style: {
      overflow: true
    }
  });

  if (flag) open();
  else close();
});
</script>

<template>
  <view v-if="showWrap"
        class="fixed bottom-0 left-0 w-screen h-screen bg-black/50 z-40 duration-200"
        :class="[showContent ? 'opacity-1' : 'opacity-0']"
        @tap.stop.prevent="handleClickMask"
        :catchtouchmove="true">
    <view :class="[
      vars({ position }),
      showContent ? 'translate-y-0' : ' translate-y-3/4',
    ]"
          @tap.stop.prevent>
      <slot />
    </view>
  </view>
</template>
